import * as React from 'react'
import { Modal, Form, Input, Button, Select, message, InputNumber } from 'antd'
import { FormInstance } from 'antd/lib/form'
import { IRecruit } from '../../types'
import * as api from '../../services/api'

interface Props {
  record?: IRecruit
  afterClose?: () => void
  getData: () => void
}

export default function Edit(props: Props): JSX.Element {
  const [visible, setVisble] = React.useState<boolean>(true)
  const [min, setMin] = React.useState<number>(props.record?.salary.min || 0)
  const [max, setMax] = React.useState<number>(props.record?.salary.max || 99)
  const validateMessages = {
    number: {
      range: `the value must be between ${min} and ${max}`,
    }
  }
  console.log(validateMessages)
  let formRef: FormInstance<IRecruit> | null
  const isEdit: boolean = props.record ? true : false
  const close = () => {
    setVisble(false)
  }
  const summit = async (flag: boolean, id: string = '') => {
    const value = await formRef?.validateFields()
    try {
      if (flag) {
        await api.updateRecruit({
          _id: id,
          salary: {
            min: value?.min,
            max: value?.max,
          },
          ...value
        })
        message.success('编辑成功')
        props.getData()
      } else {
        const res = await api.addRecruit({
          salary: {
            min: value?.min,
            max: value?.max,
          },
          ...value
        })
        if (res.stat === 'OK') {
          message.success('添加成功')
          props.getData()
        } else if (res.stat === 'ERR_NOT_FOUND') {
          message.error('你的公司不存在不能添加职位')
        }
      }
      close()
    } catch (error) {
      message.error(error)
    }


  }
  return (
    <Modal
      visible={visible}
      title={props.record ? '编辑职位' : '添加职位'}
      onCancel={close}
      maskClosable={false}
      afterClose={props.afterClose}
      destroyOnClose
      footer={[
        <Button type="text" key="cancel" onClick={() => close()}>
          取消
        </Button>,
        <Button type="primary" key="ok" onClick={() => summit(isEdit, props.record?._id)} disabled={false}>
          确认
        </Button>
      ]}
    >
      <Form
        initialValues={{
          "min": props.record?.salary.min,
          "max": props.record?.salary.max,
          ...props.record
        }
        } ref={(e) => formRef = e}>
        <Form.Item
          name="positionName"
          label="职位名称"
          rules={[
            {
              required: true,
              message: '请填写职位名称'
            }
          ]}
        >
          <Input placeholder="请填写职位名称" />
        </Form.Item>
        <Form.Item
          label="最低薪水"
          name="min"
          rules={[
            {
              type: 'number',
              required: true,
              min: 0,
              max: max
            }
          ]}
        >
          <InputNumber placeholder="单位:K" onChange={e => setMin(Number(e))} />

        </Form.Item>
        <Form.Item
          label="最高薪水"
          name="max"
          rules={[
            {
              type: 'number',
              min: min,
              max: 99,
              required: true
            }
          ]}
        >
          <InputNumber placeholder="单位:K" onChange={e => setMax(Number(e))} />

        </Form.Item>
        <Form.Item
          name="city"
          label="工作城市"
          rules={[
            {
              required: true,
              message: '请填写工作城市'
            }
          ]}
        >
          <Input placeholder="请填写工作地点" />
        </Form.Item>

        <Form.Item
          name="workYear"
          label="工作经验"
          rules={[
            {
              required: true,
              message: '请选择工作经验'
            }
          ]}
        >
          <Select placeholder="请选择工作经验">
            <Select.Option value={1}>不限</Select.Option>
            <Select.Option value={2}>在校生</Select.Option>
            <Select.Option value={3}>应届生</Select.Option>
            <Select.Option value={4}>1年以内</Select.Option>
            <Select.Option value={5}>1-3年</Select.Option>
            <Select.Option value={6}>3-5年</Select.Option>
            <Select.Option value={7}>5-10年</Select.Option>
            <Select.Option value={8}>10年以上</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="education"
          label="最低学历"
          rules={[
            {
              required: true,
              message: '请选择最低学历'
            }
          ]}
        >
          <Select placeholder="请选择最低学历">
            <Select.Option value={1}>不限</Select.Option>
            <Select.Option value={2}>初中及以下</Select.Option>
            <Select.Option value={3}>中专/中技</Select.Option>
            <Select.Option value={4}>高中</Select.Option>
            <Select.Option value={5}>大专</Select.Option>
            <Select.Option value={6}>本科</Select.Option>
            <Select.Option value={7}>硕士</Select.Option>
            <Select.Option value={8}>博士</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="location"
          label="工作地点"
          rules={[
            {
              required: true,
              message: '请填写工作地点'
            }
          ]}
        >
          <Input placeholder="请填写工作地点" />
        </Form.Item>
        <Form.Item
          name="isDisabled"
          label="发布状态"
          rules={[
            {
              required: true,
              message: '请选择发布状态'
            }
          ]}
        >
          <Select placeholder="请选择发布状态">
            <Select.Option value={1}>上架</Select.Option>
            <Select.Option value={2}>下架</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="keyWords"
          label="工作标签"
          rules={[
            {

              required: true,
              message: '请填写工作标签'
            }
          ]}
        >
          <Input.TextArea
            autoSize={{ minRows: 1 }}
            placeholder="请填写工作标签，用,分开" />

        </Form.Item>
        <Form.Item
          name="describe"
          label="职位描述"
          rules={[
            {
              required: true,
              message: '请填写职位描述'
            }
          ]}
        >
          <Input.TextArea
            autoSize={{ minRows: 5 }}
            placeholder="请填写职位描述" />
        </Form.Item>
      </Form>
    </Modal>
  )
}
